<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
  <h:head>
    <title>Facelet Title</title>
  </h:head>
  <h:body>
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:c="http://java.sun.com/jsp/jstl/core"
                    xmlns:ace="http://www.icefaces.org/icefaces/components"
                    xmlns:icecore="http://www.icefaces.org/icefaces/core"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    template="layout.xhtml">
      <ui:define name="title">Your favorite / Awesome Dates</ui:define>
      <ui:define name="content">

        <ace:messages/>

        <h:form rendered="#{!userListManager.isData}">
          <ace:panel  header="Favorites" style="width:100%;">
            <ace:dataTable value="#{watchListManager.getAllWatchListForUser(userManager.user.userID)}"
                           var="fav"
                           paginator="true"
                           paginatorPosition="bottom"
                           rows="2">
              <ace:column headerText="Name" >
                <h:outputText value="#{fav.username}"/>
              </ace:column>
              <ace:column headerText="Photo" >
                <h:graphicImage class="profilePic" value="images/userPictures/#{fav.username}/#{fav.profilePicture}" />
              </ace:column>
              <ace:column headerText="About" >
                <div style="margin-bottom: 10px;"><h:outputText value="Sex: #{fav.sex}"/></div>
                <div style="margin-bottom: 10px;"><h:outputText value="Age: #{fav.age}"/></div>
                <div><h:outputText value="Likes: #{fav.lookingForSex}"/></div>
              </ace:column>
              <ace:column headerText="Interest" >
                <h:panelGrid columns="1" >
                  <ui:repeat value="#{userInterestManager.getInterestNameForUser(fav.userID)}" var="i">
                    <div style="margin-bottom: 10px;"><h:outputText value="#{i}"/></div>
                  </ui:repeat>
                </h:panelGrid>
              </ace:column>
              <ace:column headerText="Delete" >
                <h:commandButton value="Delete favorite" style="margin-bottom:10px;" action="#{watchListManager.deleteaWatchList(userManager.user.userID, fav.userID, fav.email, fav.isWarnedAddWatchList, userManager.user.username)}"/><br/>
                <h:commandLink value="Profile" action="#{userListManager.lookToProfile(fav.userID, fav.username)}" 
                               onclick="var interval = setInterval(function () {
                                     var elem = document.getElementById('formTest:profilePanel');
                                     if (elem !== null) {
                                       elem.style.display = 'block';
                                       clearInterval(interval);
                                     }
                                   }, 50)"/>
              </ace:column>
            </ace:dataTable>
          </ace:panel>
        </h:form>

        <h:form rendered="#{userListManager.isData}" id="formTest">
          <ace:panel id="profilePanel" header="#{userProfileManager.user.username}" style="width: 500px" closable="true" closeSpeed="100">   
            <ace:ajax event="close" listener="#{userListManager.close}" render="@all" execute="@all" />
            <div>
              <div class="profileImgContainer">
                <h:graphicImage class="profilePic" 
                                value="images/userPictures/#{userProfileManager.user.username}/#{userProfileManager.user.profilePicture}" alt="No Picture found"></h:graphicImage>
              </div>
              <div class="userInfos">
                <span>Sex: #{userProfileManager.user.sex}</span><br/>
                <span>Looking for: #{userProfileManager.user.lookingForSex}</span><br/>
                <span>Age: #{userProfileManager.user.age}</span>
                <span>Height: #{userProfileManager.user.height} cm</span><br/>
                <span>City: #{userProfileManager.user.city}</span><br/>
              </div>
            </div>
            <h:form rendered="#{userManager.user.isPrivileged and !userManager.user.username.equals(userProfileManager.user.username)}">
              <h:inputHidden value="#{userProfileManager.sendToUsername}"/>
              <h:inputHidden value="#{userProfileManager.sendToUserId}"/>
              <h:commandButton value="Send a message" action="#{userProfileManager.sendMessage(userProfileManager.user.username)}"/>
              <h:commandButton value="Send a wink" onclick="alert('You just sent a wink to #{userProfileManager.user.username}!');" 
                               action="#{userProfileManager.sendWink(userProfileManager.user.username)}"/>
            </h:form>
            <ace:panel header="Goal">
              #{userProfileManager.user.goal}
            </ace:panel>
            <ace:panel header="Resume">
              #{userProfileManager.user.resume}
            </ace:panel>
            <ace:panel header="Appearance">
              #{userProfileManager.user.apparence}
            </ace:panel>
            <ace:panel header="Pictures">
              <ui:repeat value="#{userProfileManager.user.pictures}" var="p">
                <div class="profileImgContainer">
                  <h:graphicImage class="profilePic" 
                                  value="images/userPictures/#{userProfileManager.user.username}/#{p}" alt="User picture"></h:graphicImage>
                </div>
              </ui:repeat>
            </ace:panel>
          </ace:panel>
        </h:form>

      </ui:define>
    </ui:composition>
  </h:body>
</html>

